<div class="main">
  <mat-card class="item-card header">
    <mat-card-header>
      <div mat-card-avatar>
        <mat-icon class="icon">file_download</mat-icon>
      </div>
      <mat-card-title>下载 - 超时空战士2 客户端</mat-card-title>
      <mat-card-subtitle>Download - Plazma Burst 2 Client</mat-card-subtitle>
    </mat-card-header>
  </mat-card>
  <mat-card class="item-card">
    <mat-card-content class="content clearfix">
      <div class="text">
        <p>本页面用于提供游戏下载和客户端使用说明的视频</p>
      </div>
      <div class="row">
        <div class="col-sm-6">
          <div *ngIf="!showVideo" class="video">
            <mat-icon class="icon" (click)="showVideo = !showVideo">play_circle_filled</mat-icon>
          </div>
          <iframe *ngIf="showVideo" class="video"
            src="//player.bilibili.com/player.html?aid=970776355&bvid=BV1Xp4y1q7Wd&cid=272851552&page=1" scrolling="no"
            border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
        </div>
        <div class="col-sm-6">
          <div class="right">
            <div>
              <p>Windows版</p>
            </div>
            <div>
              <mat-form-field class="download-input">
                <mat-label>下载地址（应该能复制到迅雷）</mat-label>
                <input matInput [value]="downloadUrl.win">
              </mat-form-field>
              <a [href]="downloadUrl.win" target="_blank" mat-button color="primary">
                <mat-icon>file_download</mat-icon>
                <span>官网地址下载</span>
              </a>
            </div>
            <div>
              <p>Ubuntu版</p>
            </div>
            <div>
              <mat-form-field class="download-input">
                <mat-label>说明文档内有安装方法（英文）</mat-label>
                <input matInput [value]="downloadUrl.linux">
              </mat-form-field>
              <a [href]="downloadUrl.linux" target="_blank" mat-button color="primary">
                <mat-icon>file_download</mat-icon>
                <span>官网说明文档</span>
              </a>
            </div>
            <div>
              <p>暂时没有能稳定使用的安卓/IOS版</p>
            </div>
          </div>

        </div>

      </div>

    </mat-card-content>
  </mat-card>

</div>
